<!--2018/12/28 23:24. by soft-->
<#assign title='职位管理'/>
<#include '../header.ftl'/>

<div class="duty-box" style="display: none; padding: 15px 25px 0 0;">
  <form class="layui-form" id="duty-form">
    <input type="hidden" name="id">
    <div class="layui-form-item">
      <label class="layui-form-label">职位名称</label>
      <div class="layui-input-block">
        <input name="name" class="layui-input" placeholder="请输入职位名称"
               lay-verType="tips" lay-verify="required">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">职位级别</label>
      <div class="layui-input-block">
        <input name="rank" class="layui-input" placeholder="当前职位级别"
               lay-verType="tips" lay-verify="required|number" maxlength="2">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">最高等级</label>
      <div class="layui-input-block">
        <input name="maxLevel" class="layui-input" placeholder="职位内共有几个等级"
               lay-verType="tips" lay-verify="required|number" maxlength="2">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">职位描述</label>
      <div class="layui-input-block">
        <textarea name="description" class="layui-textarea" placeholder="描述" style="resize: none;"
                  lay-verType="tips" lay-verify="required"></textarea>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn layui-btn-fluid layui-btn-normal" id="add_" lay-submit lay-filter="add_">添加</button>
        <button style="margin-left: 0;" class="layui-btn layui-btn-fluid layui-hide" id="edit_"
                lay-submit lay-filter="edit_">修改</button>
      </div>
    </div>
  </form>
</div>

<div class="duty">
  <div class="layui-card">
    <div class="layui-card-header">
      <div class="text-right">
        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="methods.add();">添加</button>
      </div>
    </div>
    <div class="layui-card-body">
      <table id="duty-table"></table>

      <script type="text/html" id="duty-tool-s">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="showDesc">查看描述</a>
      </script>
      <script type="text/html" id="duty-tool">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      </script>
    </div>
  </div>

  <script src="${root}/static/js/common.js"></script>
  <script>
    var methods;
    layui.use(['table', 'laydate', 'jquery', 'layer', 'form'], function () {
      var boxIndex;
      var $ = layui.$;
      var form = layui.form;
      var layer = layui.layer;
      var table = layui.table;
      var laydate = layui.laydate;

      table.render({
        elem: '#duty-table',
        url: '${root}/duty/page',
        method: 'post',
        page: true,
        cols: [[
          {title: '序号', type: 'numbers'},
          {field: 'name', title: '职位名'},
          {title: '职位级别', templet: '<i><span class="layui-badge layui-bg-green">{{(d.rank) + " 级"}}</span></i>'},
          {title: '职位最高等级', templet: '<i><span class="layui-badge layui-bg-cyan">{{numToChinese(d.maxLevel) + "级"}}</span></i>'},
          {field: 'datetime', title: '创建时间'},
          {title: '描述', toolbar: '#duty-tool-s'},
          {title: '操作', toolbar: '#duty-tool'}
        ]],
        parseData: function (res) {
          return {
            code: 0,
            msg: res.message,
            count: (res.payload ? res.payload.totalElements : 0),
            data: (res.payload ? res.payload.content : 0)
          }
        }
      });

      methods = {
        add: function () {
          switchType(true);
        },
        edit: function(obj) {
          switchType(false, obj);
        },
        del: function(obj) {
          layer.confirm('确定删除<b style="color: #bb4d31;">['+obj.name+']</b>职位吗？', {
            title: '提示',
            icon: 3
          }, function (i) {
            $.post('${root}/duty/delete/' + obj.id, function (data) {
              if (data.status === 200) {
                table.reload('duty-table');
                layer.msg('删除成功！', {icon: 6, time: 1200});
                setTimeout(function () {
                  layer.close(i);
                }, 1250);
              } else {
                layer.alert('删除失败：' + data.message, {icon: 5});
              }
            });
          });
        },
        showDesc: function (obj) {
          layer.open({
            title: '<b style="color: #0b9992">['+obj.name+']</b> 描述',
            type: 1,
            shadeClose: true,
            area: ['400px', '220px'],
            content: '<div class="desc-box">'+obj.description+'</div>'
          });
        }
      };
      table.on('tool', function (o) {
        var mtd = methods[o.event];
        if (mtd != null) {
          mtd(o.data);
        }
      });

      form.on('submit(add_)', function (obj) {
        var fd = obj.field;
        if (fd.id.length === 0) {
          $.post('${root}/duty/add', fd, function (data) {
            if (data.status === 200) {
              table.reload('duty-table');
              layer.msg('添加成功！', {time: 1200, icon: 6});
            } else {
              layer.alert('添加失败：' + data.message, {icon: 3});
            }
            layer.close(boxIndex);
          });
        }
        return false;
      });

      form.on('submit(edit_)', function (obj) {
        var fd = obj.field;
        $.post('${root}/duty/change', fd, function (data) {
          if (data.status === 200) {
            table.reload('duty-table');
            layer.msg('修改成功！', {time: 1200, icon: 6});
          } else {
            layer.alert('修改失败：' + data.message, {icon: 3});
          }
          layer.close(boxIndex);
        });
        return false;
      });

      laydate.render({
        elem: '#col-date',
        value: new Date(),
        theme: '#0b79a8'
      });

      var $id = $('[name=id]');
      var $name = $('[name=name]');
      var $rank = $('[name=rank]');
      var $level = $('[name=maxLevel]');
      var $desc = $('[name=description]');
      var $add = $('#add_');
      var $edit = $('#edit_');
      function switchType(isAdd, duty) {
        var title = '职位添加';
        if (isAdd) {
          $id.val('');
          $rank.val('');
          $name.val('');
          $level.val('');
          $desc.html('');
          $add.removeClass('layui-hide');
          $edit.addClass('layui-hide');
        } else {
          title = '职位编辑';
          $id.val(duty.id);
          $rank.val(duty.rank);
          $name.val(duty.name);
          $level.val(duty.maxLevel);
          $desc.html(duty.description);
          $add.addClass('layui-hide');
          $edit.removeClass('layui-hide');
        }
        boxIndex = layer.open({
          type: 1,
          title: title,
          move: false,
          area: ['500px', '400px'],
          content: $('.duty-box')
        });
      }
    });
  </script>
</div>

<#include '../footer.ftl'>
